<!--  -->
<template>
  <div>
    <AddLiuYan @reload="reset"></AddLiuYan>
    <div style="display: flex; justify-content: space-around; flex-wrap: wrap">
      <div
        v-for="(comment, index) in tableData"
        :key="index"
        :style="{ width: randomWidth(index) }"
      >
        <LiuYanCard :messageData="comment"></LiuYanCard>
      </div>
    </div>

    <!-- 页脚分页 -->
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import LiuYanCard from "../components/LiuyanCard.vue";
import AddLiuYan from "../components/AddLiuYan.vue";

export default {
  name: "LiuYan",
  data() {
    return {
      allData: [],
      tableData: [],
      loading: false,
      page: 1, //页脚显示的当前页
      size: 10, //一页多少条数据
      total: 400, //总条目数
      width: [],
    };
  },
  components: {
    AddLiuYan,
    LiuYanCard,
  },
  mounted() {
    this.loadMessage();
    this.getAllMessage();
  },
  methods: {
    //分页表格数据
    getTableData() {
      //allData为全部数据
      this.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.allData.length; //总条目等于allDaTa长度
    },
    //size改变时的回调，参数为当前的size
    handleSizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条", val);
      this.size = val;
      this.page = 1; //size改变时要把page重置为1，再把参数赋值给size，因为size改变会导致page数量改变
      this.getTableData();
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      // console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTableData();
    },
    reset() {
      this.loadMessage();
      this.getAllMessage();
    },
    //请求所有的留言信息
    getAllMessage() {
      this.$request.get("leave-word/queryAll").then((res) => {
        // console.log(res);
        if (res.data.obj != null) {
          // console.log(res.data.obj);
          this.allData = res.data.obj;
          // console.log(this.allData);
          this.getTableData(); //获取信息后更新表单数据
        } else {
          this.$message.error("信息获取失败");
        }
      });
    },

    //生成随即大小卡片
    loadMessage() {
      for (var i = 0; i < 4; i++) {
        this.width[i] = this.randomNum(20, 50); //每个卡片宽度介于20%-50%之间
      }
      this.loading = false;
      window.scrollTo(0, 0);
    },
    randomWidth(i) {
      return this.randomNum(15, 40) + "%";
    },

    randomNum(minNum, maxNum) {
      //产生一个介于minNum到maxNum的随机数
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
  },
};
</script>
<style scoped>
.fenye {
  position: fixed;
  bottom: 10px;
}
</style>
